<template>
	<view class="contain">

		<!-- 商家头部 -->
		<view class="headtop">
			<view class="flex justify-start photoandword">
				<view class="w-[250rpx] flex justify-center items-center left">
					<image :src="storeInfo.Logo"></image>
				</view>
				<view class="w-full flex flex-col justify-start items-center right">
					<view class="w-full flex justify-start"><text class="bigtitle blod ">{{storeInfo.Name}}</text>
					</view>
					<view class="w-full flex justify-start items-center mt-2 desc">
						<view class="w-[150rpx] flex flex-col">
							<text class="small gray">评分</text>
							<text class="small blod">{{storeInfo.Pingfen}}</text>
						</view>
						<view class="w-[150rpx] flex flex-col">
							<text class="small gray">月售</text>
							<text class="small blod">{{storeInfo.Sell}}</text>
						</view>

						<view class="w-[150rpx] flex flex-col">
							<text class="small gray">外卖配送</text>
							<text class="small blod">{{storeInfo.Time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 跑马灯 -->
		<view class="my-2">
			<u-notice-bar :text="mgtext" color="#FFFFFF" bgColor="#F56C6C"></u-notice-bar>
		</view>

		<u-gap height="10" bgColor="#f1f1f1" marginBottom="13"></u-gap>

		<!-- 标签 -->
		<view class="tabs">
			<u-tabs @click="tabsClick" :list="tabslist" lineWidth="30"
				:activeStyle="{'fontSize':'36rpx;','fontWeight':'bold','color':'#FF6600;'}"
				:inactiveStyle="{'fontSize':'30rpx;'}"></u-tabs>
		</view>


		<!-- 点菜 -->
		<view class="flex justify-between items-start mt-2" v-if="curName==='菜单'">
			<view class="w-[25%] flex justify-center items-start itemList">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="scroll-view-item mid fontcolor" v-for="(item,index) in itemList"
						:class="index===selectIndex?'selected':''" @click="selectItem(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="dataBody meishiBody prodcutList" style="width:73% !important;" v-if="selectIndex===0">
				<view class="w-full flex flex-col itemData" v-for="(item,index) in diancaiList.data">
					<view class="w-full flex flex-row py-4 itemBox">
						<view class="w-[200rpx] relative flex justify-center items-center">
							<view>
								<image :src="item.imgUrl"></image>
							</view>
							<view class="absolute left-0 top-0 mid blod zhaopai" v-if="index===0">招牌</view>
						</view>
						<view class="w-[320rpx] flex justify-start flex-col ml-2">
							<view class="w-[100%] flex justify-center">
								<view class="w-full font-bold mid">{{item.title}}</view>
							</view>
							<view class="flex justify-start star mt-1">
								<view class="flex justify-start">
									<text class="text-sm font-bold" style="color:#999;">{{item.lvName}}</text>
								</view>
							</view>
							<view class="flex justify-start mt-1 hot">
								<view class="pl-1 pr-1" style="background:#FFEEDE;"><text
										class="relative top-[-3rpx] text-xs font-bold text-amber-800">{{item.paihang}}</text>
								</view>
							</view>
							<view class="flex justify-between mt-1 mb-3">
								<view class="flex justify-start items-center">
									<view class="relative top-[2rpx] flex justify-center items-center ml-1"><text
											class="big font-bold text-red-600">{{item.discount}}</text></view>
									<view class="flex justify-center items-center"><text
											class="text-xs text-gray-500 line-through"
											style="font-size:20rpx;">{{item.originPrice}}</text></view>
								</view>
								<view class="w-[200rpx] flex justify-end items-end flex-col">
									<view class="w-[110rpx] justify-end">
										<u-button type="warning" shape="circle" text="选规格"
											@click="showGuiGe(index)"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> <!-- itemData End -->
			</view>
			<view class="dataBody meishiBody flex justify-center mt-5 prodcutList" style="width:73% !important;" v-else>
				{{selectName}}产品展示</view>
		</view>

		<!-- 超值推荐 -->
		<view class="dataBody meishiBody" v-if="curName==='超值推荐'">
			<view class="w-full flex flex-col itemData" v-for="item in meishiList.data" @click="doThis(item)">
				<view class="w-full flex flex-row py-4 itemBox">
					<view class="w-[220rpx] flex justify-center items-center">
						<image :src="item.imgUrl"></image>
					</view>
					<view class="w-[480rpx] flex justify-start flex-col ml-2">
						<view class="w-[100%] flex justify-center">
							<view class="w-full font-bold mid">{{item.title}}</view>
						</view>
						<view class="flex justify-start star mt-1">
							<view class="flex justify-start">
								<text class="text-sm font-bold" style="color:#999;">{{item.lvName}}</text>
							</view>
						</view>
						<view class="grid grid-cols-3 gap-1 mt-1">
							<view v-for="(tagName,tindex) in item.tags" :class="item.class[tindex]">{{tagName}}</view>
						</view>
						<view class="flex justify-between mt-1 mb-3">
							<view class="flex justify-start items-center">
								<view class="relative top-[2rpx] flex justify-center items-center ml-1"><text
										class="big font-bold text-orange-600">{{item.discount}}</text></view>
								<view
									class="h-[33rpx] relative top-[0rpx] ml-1 flex justify-center items-center border border-orange-600 rounded-md"
									style="padding: 5rpx 8rpx;">
									<text class="text-xs font-bold text-orange-600">{{item.zhekou}}</text>
								</view>
								<view class="flex justify-center items-center"><text
										class="text-xs text-gray-500 line-through"
										style="font-size:20rpx;">{{item.originPrice}}</text></view>
							</view>
							<view class="w-[200rpx] flex justify-end items-end flex-col">
								<view class="w-full text-gray-400 text-sm flex justify-end items-end">{{item.sell}}
								</view>
								<view class="w-[130rpx] justify-end">
									<u-button type="error" shape="circle" text="抢购"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> <!-- itemData End -->
		</view> <!-- meishiBody End -->


		<!-- 评价 -->
		<view class="p-3 dataBody meishiBody" v-if="curName==='评价'">
			<!-- 评论组件 -->
			<replyComment></replyComment>
		</view>


		<!-- 商家 -->
		<view class="p-2 dataBody meishiBody" v-if="curName==='商家'">
			<view>
				<image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/sjinfo.jpg" mode="widthFix"
					style="width:100%;"></image>
			</view>
		</view>


		<!-- 购物列表 -->
		<u-transition :show="showBuyLists" mode="slide-up" duration="100">
			<view class="flex flex-col buyLists">
				<view class="flex justify-between items-baseline top">
					<view class="w-[70%] big blod pl-2">已添加商品</view>
					<view class="flex justify-center small gray" @click="clearAll"><u-icon name="trash" color="#ccc"
							size="18"></u-icon> 清空</view>
					<view class="gray" @click="showbuy">关闭</view>
				</view> <!-- top End -->
				<view class="dataitem" v-if="buyerInfo.data!=null">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="scroll-view-item ibox" v-for="(item,index) in buyerInfo.data.buyList">
							<view class="w-[60%] flex justify-start left">
								<view>
									<image :src="item.imgUrl" style="width:120rpx; height:120rpx;"></image>
								</view>
								<view class="flex flex-col justify-start items-center desc ml-2">
									<text class="w-full text-left mid blod">{{item.title}}</text>
									<!-- <text class="w-full text-left small gray">杂肉加双蛋拉</text> -->
									<text class="w-full text-left red blod mid">￥{{item.discountVal}}</text>
								</view>
							</view>
							<view class="right">
								<view class="relative top-[20rpx]"><u-number-box :min="1" :max="100" v-model="item.buy"
										@change="valChange($event,index)"></u-number-box></view>
								<view class="w-full text-right small gray relative top-[30rpx]" @click="remove(index)">
									移除</view>
							</view>
						</view>
					</scroll-view> <!-- ibox End -->
				</view> <!-- dataitem End -->
			</view> <!-- buyLists End -->
		</u-transition>



		<!-- 底部显示框 -->
		<view class="imgFixed" v-if="productTotal>0" @click="showbuy">
			<image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/qishou.png"
				style="width:160rpx; height:182rpx;"></image>
			<view class="badge" v-if="productTotal>0"><u-badge type="error" max="99" :value="productTotal"></u-badge>
			</view>
		</view>
		<view class="flex justify-between items-baseline fixed" v-if="productTotal>0">
			<view class="flex justify-center items-end left" @click="showbuy">
				<view class="flex flex-col justify-start items-center relative left-[180rpx] top-[-20rpx]">
					<view class="w-full text-left mid red blod">到手约￥{{realPay}}</view>
					<view class="w-full text-left"><text class="small text-gray-500">配送费约￥{{freight}}</text></view>
				</view>
			</view>
			<view class="right">
				<u-button type="warning" shape="circle" text="去结算" @click="GoPayOrder"></u-button>
			</view>
		</view>




		<!-- 规格弹窗 -->
		<u-popup :show="ggshow" @close="ggclose" @open="ggopen" round="10" :closeOnClickOverlay="true" mode="center">
			<view class="guigeWindow">
				<view class="big black blod title">{{diancaiList.data[ggIndex].title}}</view>
				<view class="contentBody">
					<view v-for="(item,index) in diancaiList.data[ggIndex].optionLists">
						<view class="mid black blod subtitle">{{item.otName}}</view>
						<view class="flex justify-start items-center flex-wrap options">
							<view v-for="(subitem,subindex) in item.options"
								class="flex justify-center items-center itemBox autowidth"
								:class="subitem.checked===true?'selected':''" @click="buySelected(index,subindex)">
								<block v-if="item.otName==='份量' || item.otName==='购买数量'">
									<view v-if="item.otName==='份量' && subitem.value.indexOf('|')!=-1">
										{{formatstr(subitem.value,0)}}人份 <text>￥{{formatstr(subitem.value,1)}}</text>
									</view>
									<view v-if="item.otName==='购买数量' && subitem.value.indexOf('|')!=-1">
										{{formatstr(subitem.value,0)}}件 <text>￥{{formatstr(subitem.value,1)}}</text>
									</view>
								</block>
								<block v-else>
									<view>{{subitem.value}}</view>
								</block>
								<!-- <block v-if="item.otName==='购买数量'">
										<view v-if="item.otName==='购买数量' && subitem.value.indexOf('|')!=-1">{{formatstr(subitem.value,0)}}件 <text>￥{{formatstr(subitem.value,1)}}</text></view>
										<view v-else>{{subitem.value}}</view>
									</block> -->
							</view>
						</view>
					</view>
				</view> <!-- contentBody End -->
				<view class="flex justify-start items-baseline selectedData">
					<text class="small">已选规格:</text>
					<text class="small ml-1">{{finalStr}}</text>
				</view>
				<view class="flex justify-between items-baseline total">
					<view class="money">
						<text class="small blod">总计</text>
						<text class="text-2xl red">￥{{showTotal}}</text>
					</view>
					<view class="cart">
						<u-button type="warning" shape="circle" text="+ 加入购物车" @click="addToCar"></u-button>
					</view>
				</view>
			</view> <!-- guigeWindow End -->
			<view class="flex justify-center items-center py-2" @click="ggclose"><u-icon name="close-circle"
					color="#999" size="35"></u-icon></view>
		</u-popup>

	</view> <!-- contain End -->
</template>

<script setup lang='ts'>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		GoUrl,
		Toast
	} from '@/utils/utils'
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/stores/userStore'
	import {
		count
	} from 'console';
	/* import tools from '@/common/tools' */
	const store = userStore()

	let win = uni.$tools.winWidth();
	let winH = uni.$tools.winHeight();

	let mgtext = ref('鲜炸美味，烤鸡独特!享受单人随心配，尽情满足口腹之欲');
	let curName = ref('菜单');
	let ggshow = ref(false); //显示规格购买参数
	let ggIndex = ref(0);
	let realPay = ref(0); //实际支付
	let jfyouhui = ref(0); //积分优惠
	let freight = ref(3); //运费
	let showBuyLists = ref(false);
	let showTotal = ref(0); //显示弹窗商品总价
	let productTotal = ref(0); //购买商品统计

	const ggclose = () => {
		ggshow.value = false;
	}
	const ggopen = () => {
		ggshow.value = true;
	}

	const showbuy = () => {
		showBuyLists.value = !showBuyLists.value;
	}

	const valChange = (e: any, index: number) => {
		console.log("增加", index, e);
		buyerInfo.data.buyList[index].buy = e.value;
		countPay();
		uni.setStorageSync("buyerInfo", buyerInfo.data);
	}


	const GoPayOrder = () => {
		uni.$tools.GoUrl("/pages/shop_pay/shop_pay");
	}


	const remove = (index: number) => {
		uni.showModal({
			title: "温馨提示",
			content: "是否移除商品",
			showCancel: true,
			success: res => {
				if (res.confirm) {
					buyerInfo.data.buyList.splice(index, 1);
					uni.setStorageSync("buyerInfo", buyerInfo.data);
					if (JSON.stringify(buyerInfo.data.buyList) === "[]") {
						console.log("隐藏窗口...")
						realPay.value = 0;
						productTotal.value = 0;
						showTotal.value = 0;
						showBuyLists.value = false; //关闭规格窗口
					}
					countPay();
				}
			}
		})
	}


	const clearAll = () => {
		uni.showModal({
			title: "温馨提示",
			content: "是否清空所有商品",
			showCancel: true,
			success: res => {
				if (res.confirm) {
					buyerInfo.data.buyList = [];
					realPay.value = 0;
					productTotal.value = 0;
					uni.removeStorageSync("buyerInfo");
					showBuyLists.value = false; //关闭规格窗口
				}
			}
		})
	}



	//购买的
	let buyerInfo = reactive < any > ({
		data: {
			productIndex: -1,
			realPay: 0,
			buyList: []
		}
	});
	const showGuiGe = (index: number) => {
		ggIndex.value = index;
		showTotal.value = diancaiList.data[ggIndex.value].discountVal;
		//getFinalStr(); //要放在ggIndex变量下
		/*
		let buyerInfo= uni.getStorageSync("buyerInfo") || null;
		realPay.value=(buyerInfo!=null && buyerInfo.productIndex===ggIndex.value)?buyerInfo.realPay:diancaiList.data[ggIndex.value].discountVal;
		//*/
		//realPay.value=diancaiList.data[ggIndex.value].discountVal;
		//赋值对象数据，否则后续一些逻辑会因当前无值，无法操作
		if (JSON.stringify(buyerInfo.data.buyList) === "[]") {
			console.log("数组为空")
			buyerInfo.data.buyList.push(diancaiList.data[ggIndex.value]);
			//uni.setStorageSync("buyerInfo",buyerInfo.data);
			//countPay();
		}
		ggopen();
	}



	const strlen = (inputString: string) => {
		if (inputString.length > 10) return inputString.substring(0, 10) + "...";
		return inputString;
	}

	const formatstr = (inputstring: string, index: number) => {
		//console.log("输入的字符:",inputstring);
		if (inputstring.indexOf("|") != -1) {
			//console.log("字符长度:",inputstring.length);
			let arr = inputstring.split("|");
			return arr[index];
		}
		return inputstring;
	}

	let tabslist = reactive < any > (
		[{
				name: '菜单'
			},
			{
				name: '超值推荐'
			},
			{
				name: '评价',
				badge: {
					value: 365,
				}
			},
			{
				name: '商家'
			}
		]
	);

	let buyIndex = ref(0);
	let selectIndex = ref(0);
	let optionsIndex = ref(0);
	let finalStr = ref('1人份');
	const buySelected = (mainIndex: number, subIndex: number) => {
		buyIndex.value = mainIndex;
		diancaiList.data[ggIndex.value].optionLists[mainIndex].options.forEach(obj => {
			obj.checked = false;
		});
		diancaiList.data[ggIndex.value].optionLists[mainIndex].options[subIndex].checked = true;
		let buyinfo = diancaiList.data[ggIndex.value].optionLists[mainIndex].options[subIndex].value; //value: "1|320"
		console.log("购买信息", buyinfo)
		if (buyinfo.indexOf("|") != -1) {
			let buynumber = buyinfo.split("|")[0];
			let productmoney = buyinfo.split("|")[1];
			diancaiList.data[ggIndex.value].buy = parseInt(buynumber);
			showTotal.value = productmoney;
		}
		countPay(); //执行一次更新，计算购买数量
		getFinalStr();
	}
	const getFinalStr = () => {
		finalStr.value = "";
		//finalStr.value=buylists[buyIndex.value].buynumber+"人份";
		//finalStr.value+="、"+options[optionsIndex.value];
		diancaiList.data[ggIndex.value].optionLists.forEach(item => {
			item.options.forEach(subitem => {
				if (subitem.checked) {
					let text = subitem.value;
					if (text.indexOf("|") != -1) {
						let buyNumber = parseInt(text.split("|")[0]);
						text = buyNumber + "人份";
						//计算价格
						realPay.value = buyNumber * diancaiList.data[ggIndex.value].discountVal;
						//保存选择
						let obj = {};
						obj.productIndex = ggIndex.value; //产品编号
						obj.realPay = realPay.value;
						obj.buyList = [];
						buyerInfo.data = obj;
						uni.setStorageSync("buyerInfo", buyerInfo.data);
					}
					finalStr.value += text + "、";
				}
			});
		});
		finalStr.value = finalStr.value.substring(0, finalStr.value.length - 1);
	}
	let buylists = reactive < any > (
		[{
				buynumber: 1,
				price: 17
			},
			{
				buynumber: 2,
				price: 34
			}
		]
	);

	let itemList = reactive < any > (
		[{
				name: '推荐'
			},
			{
				name: '老红糖珍珠奶茶'
			},
			{
				name: '进店必备'
			},
			{
				name: '蜜桃系列'
			},
			{
				name: '现蒸芋圆芋泥'
			},
			{
				name: '有口感的茶'
			},
			{
				name: '芝士奶盖'
			},
			{
				name: '暴打柠檬系列'
			},
			{
				name: '有水果茶系列'
			},
			{
				name: '加料区'
			},
			{
				name: '轻乳茶系列'
			},
			{
				name: '特色小吃'
			},
			{
				name: '煎炸系列'
			},
			{
				name: '芝士奶盖'
			},
			{
				name: '暴打柠檬系列'
			},
			{
				name: '有水果茶系列'
			},
			{
				name: '加料区'
			},
			{
				name: '轻乳茶系列'
			},
			{
				name: '特色小吃'
			},
			{
				name: '煎炸系列'
			},
			{
				name: ''
			},
			{
				name: ''
			},
			{
				name: ''
			}
		]
	);



	let selectName = ref('');
	const selectItem = (index: number) => {
		selectIndex.value = index;
		selectName.value = itemList[index].name;
		console.log(selectName.value);
		// if(selectName.value==='秋冬防寒'){
		// 	diancaiList.data = qiudongList.data;
		// }
		// if(selectName.value==='女性护理'){
		// 	diancaiList.data = jinxiList.data;
		// }
		setTimeout(() => {
			uni.pageScrollTo({
				scrollTop: 0
			})
		}, 200);
	}

	const tabsClick = (e: any) => {
		console.log(e);
		curName.value = e.name;
	}

	let dataId = ref("");

	const doThis = (itemData: any) => {
		uni.setStorageSync("shopData", itemData);
		GoUrl('../shop_pay/shop_pay');
	}

	//店铺信息
	let storeInfo = reactive < any > ({
		Logo: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcLogo.png",
		Name: "三郎烈焰烤鸡(赤坎店)",
		Pingfen: 4.8,
		Sell: "200+",
		Time: "约25分钟"
	});

	//点菜列表
	let diancaiList = reactive < any > ({
		data: [{
				title: "肯德基KFC10对烤翅（奥尔良烤翅）/炸鸡翅10对装",
				lvName: "月售 900+",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj1.png",
				paihang: "赤坎区炸鸡人气榜第1名 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
								value: "1|320",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|640",
								checked: false
							},
						]
					},
					{
						otName: '冰量',
						options: [{
								value: "正常冰推荐",
								checked: true
							},
							{
								value: "少冰",
								checked: false
							},
							{
								value: "去冰",
								checked: false
							}
						]
					},
					{
						otName: '口味',
						options: [{
								value: "盐油",
								checked: true
							},
							{
								value: "酱油",
								checked: false
							},
							{
								value: "红色辣椒油",
								checked: false
							},
							{
								value: "番茄酱红色辣椒油",
								checked: false
							},
							{
								value: "印度咖喱油",
								checked: false
							}
						]
					},
				],
			},
			{
				title: "3人份金枪大鸡腿孜然味烤饭",
				lvName: "月售 10+",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj2.png",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
								value: "1|99",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|198",
								checked: false
							},
						]
					},
					{
						otName: '口味',
						options: [{
								value: "孜然味",
								checked: true
							},
							{
								value: "酱油味",
								checked: false
							},
							{
								value: "烧烤味",
								checked: false
							},
							{
								value: "铁板味",
								checked: false
							},
							{
								value: "酱香味",
								checked: false
							}
						]
					},
				],
			},
		]
	});


	//美食列表
	let meishiList = reactive < any > ({
		data: [{
				title: "肯德基KFC10对烤翅（奥尔良烤翅）/炸鸡翅10对装",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 5, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj1.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj1.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|680",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
			{
				title: "3人份金枪大鸡腿孜然味烤饭",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				jifen: 2, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj2.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/kfcj2.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|99",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
		]
	});



	let xinyueList = reactive < any > ({
		data: [{
				title: "老火皮蛋瘦肉粥",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 50+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue1.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue1.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|18",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
			{
				title: "酱油王斋肠",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue2.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue2.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|15",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
			{
				title: "养生馒头",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥9",
				discountVal: 9,
				zhekou: "3.7折",
				originPrice: "￥12",
				jifen: 2, //可抵扣的金额
				sell: "月销 30+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue3.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/xinyue3.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|9",
						checked: true
					}, /*默认1人份*/ ]
				}],
			}
		]
	});




	let mingmenList = reactive < any > ({
		data: [{
				title: "名门养生系列",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 50+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "名门沐足",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/mingmen.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});




	let jinxiList = reactive < any > ({
		data: [{
				title: "金喜湾休闲1系列",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 50+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "金喜湾休闲2系列",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 10+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jinxi.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});









	let chuanyuanList = reactive < any > ({
		data: [{
				title: "传元休闲系列1",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 50+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "传元休闲系列2",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA1.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});


	let zunyingList = reactive < any > ({
		data: [{
				title: "尊莹休闲系列A",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 50+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "尊莹休闲系列B",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.png",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/SPA2.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});




	let mlyList = reactive < any > ({
		data: [{
				title: "生物肋骨隆鼻",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥1888",
				discountVal: 1888,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://b0.bdstatic.com/ugc/m_DYAw13VH0X7r-JsyexyA1a9d23ea10245ad2655df04ca2f2f9c5.jpg?x-bce-process=image/auto-orient,o_1/watermark,image_NDU0ZjAyZDU5YjQ1LnBuZw==,bucket_searchbox,w_36,text_QOmahum8u-WMu-eUn-e9l-WLhw==,type_RlpMYW5UaW5nSGVp,size_36,x_24,y_24,interval_4,color_FFFFFF,effect_softoutline,shc_000000,blr_2,align_1",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei1.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "少女提升线",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥315",
				discountVal: 315,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 20+",
				buy: 1, //默认1
				imgUrl: "https://img0.baidu.com/it/u=2119254943,3666456636&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei1.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});




	let huameiList = reactive < any > ({
		data: [{
				title: "修复鼻部基地",
				lvName: "周一至周日 · 免预约 · 随时退",
				discount: "￥18",
				discountVal: 18,
				zhekou: "3.7折",
				originPrice: "￥38",
				jifen: 5, //可抵扣的金额
				sell: "月销 50+",
				buy: 1, //默认1
				imgUrl: "https://img0.baidu.com/it/u=1229473086,4148263059&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei2.png"
				],
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			},
			{
				title: "魅力双眼皮",
				lvName: "周一至周三· 限时特惠 6折",
				discount: "￥15",
				discountVal: 15,
				zhekou: "3.7折",
				originPrice: "￥30",
				jifen: 2, //可抵扣的金额
				sell: "月销 10+",
				buy: 1, //默认1
				imgUrl: "https://img0.baidu.com/it/u=4198934604,318714494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=659",
				slideshowUlr: [
					"https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/yimei2.png"
				],
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: []
			}
		]
	});

	let jiudianList = reactive < any > ({
		data: [{
				title: "精品房",
				lvName: "1张1.8米大床 21-23m2人入住有窗无早餐",
				discount: "￥120",
				discountVal: 120,
				zhekou: "3.7折",
				originPrice: "￥380",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://img2.baidu.com/it/u=406328400,3104897999&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
				paihang: "赤坎区住宿榜第1名 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
							value: "1|120",
							checked: true
						}, /*默认1人份*/
						{
							value: "2|240",
							checked: false
						},
					]
				}],
			},
			{
				title: "阳台房/阳光好",
				lvName: "1张1.8米大床 23-25m2人入住有阳台,早餐",
				discount: "￥199",
				discountVal: 199,
				zhekou: "3.7折",
				originPrice: "￥399",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://img0.baidu.com/it/u=4073873146,193106930&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
							value: "1|199",
							checked: true
						}, /*默认1人份*/
						{
							value: "2|298",
							checked: false
						},
					]
				}, ],
			},
		]
	});

	let qiudongList = reactive < any > ({
		data: [{
				title: "秋冬大衣1",
				lvName: "防寒系列",
				discount: "￥298",
				discountVal: 298,
				zhekou: "3.8折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://cbu01.alicdn.com/img/ibank/O1CN0107urcz1gRiGWDLIdl_!!2217584984139-0-cib.jpg",
				paihang: "赤坎区住宿榜第1名 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '购买数量',
						options: [{
								value: "1|298",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|596",
								checked: false
							},
						]
					},
					{
						otName: '用料',
						options: [{
								value: "加绒",
								checked: true
							},
							{
								value: "纯棉",
								checked: false
							},
							{
								value: "冰丝",
								checked: false
							},
						]
					},
					{
						otName: '颜色',
						options: [{
								value: "黑色",
								checked: true
							},
							{
								value: "藏青色",
								checked: false
							},
							{
								value: "红色",
								checked: false
							},
							{
								value: "棕色",
								checked: false
							},
							{
								value: "蓝色",
								checked: false
							}
						]
					},
				],
			},
			{
				title: "秋冬大衣2",
				lvName: "防寒系列",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://cbu01.alicdn.com/img/ibank/O1CN01NrtMpz1gRiGPpFtja_!!2217584984139-0-cib.jpg",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '购买数量',
						options: [{
								value: "1|99",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|198",
								checked: false
							},
						]
					},
					{
						otName: '颜色',
						options: [{
								value: "黑色",
								checked: true
							},
							{
								value: "藏青色",
								checked: false
							},
							{
								value: "红色",
								checked: false
							},
							{
								value: "棕色",
								checked: false
							},
							{
								value: "蓝色",
								checked: false
							}
						]
					},
				],
			},
		]
	});

	let myjList = reactive < any > ({
		data: [{
				title: "青岛啤酒",
				lvName: "12支一箱",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 3000+",
				imgUrl: "https://wx3.sinaimg.cn/mw690/006IbqJfgy1hrq4axbnllj30m80m8q64.jpg",
				paihang: "啤酒榜销量第1名 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
								value: "1|320",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|640",
								checked: false
							},
						]
					},
					{
						otName: '冰量',
						options: [{
								value: "正常冰推荐",
								checked: true
							},
							{
								value: "少冰",
								checked: false
							},
							{
								value: "去冰",
								checked: false
							}
						]
					},
					{
						otName: '包装',
						options: [{
								value: "支装",
								checked: true
							},
							{
								value: "桶装",
								checked: false
							},
						]
					},
				],
			},
			{
				title: "珠江啤酒",
				lvName: "12支一箱",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://image.baidu.com/search/down?url=https://wx2.sinaimg.cn/oslarge/be684cfagy1hvinavzdc0j20rs0rsqpb.jpg",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
								value: "1|99",
								checked: true
							}, /*默认1人份*/
							{
								value: "2|198",
								checked: false
							},
						]
					},
					{
						otName: '口味',
						options: [{
							value: "纯生",
							checked: true
						}, ]
					},
				],
			},
		]
	});

	let baihuoList = reactive < any > ({
		data: [{
				title: "佳洁士Prest",
				lvName: "12支装",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://img2.baidu.com/it/u=1902837957,3966332789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
				paihang: "牙膏榜榜第1名 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
							value: "1|320",
							checked: true
						}, /*默认1人份*/ ]
					},
					{
						otName: '口味',
						options: [{
								value: "薄荷味",
								checked: true
							},
							{
								value: "清新味",
								checked: false
							},
						]
					},
				],
			},
			{
				title: "佳洁士洗白系列>",
				lvName: "5支装",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "http://t14.baidu.com/it/u=2685256683,2987924592&fm=224&app=112&f=PNG?w=500&h=500",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
							value: "1|99",
							checked: true
						}, /*默认1人份*/ ]
					},
					{
						otName: '口味',
						options: [{
								value: "苹果味",
								checked: true
							},
							{
								value: "橙子味",
								checked: false
							},
						]
					},
				],
			},
		]
	});


	let sukouList = reactive < any > ({
		data: [{
				title: "漱口液1",
				lvName: "12支装",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 1000+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj2.png",
				paihang: "漱口液榜销量第1 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
							value: "1|320",
							checked: true
						}, /*默认1人份*/ ]
					},
					{
						otName: '口味',
						options: [{
							value: "薄荷味",
							checked: true
						}, ]
					},
				],
			},
			{
				title: "漱口液2",
				lvName: "5支装",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "月销 500+",
				imgUrl: "https://guangxins.oss-cn-shenzhen.aliyuncs.com/test/jj2.png",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
						otName: '份量',
						options: [{
							value: "1|99",
							checked: true
						}, /*默认1人份*/ ]
					},
					{
						otName: '口味',
						options: [{
								value: "清新味",
								checked: true
							},
							{
								value: "柚子味",
								checked: false
							},
						]
					},
				],
			},
		]
	});


	let dyList = reactive < any > ({
		data: [{
				title: "蛟龙行动",
				lvName: "春节上映 好评度98%",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "已售 1000+",
				imgUrl: "https://bkimg.cdn.bcebos.com/pic/c83d70cf3bc79f3df8dcd2381ff9da11728b47108339",
				paihang: "票房第1 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|58",
						checked: true
					}, /*默认1人份*/ ]
				}, ],
			},
			{
				title: "红海行动",
				lvName: "高评分 推荐",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "已售 500+",
				imgUrl: "https://t10.baidu.com/it/u=268924860,250398994&fm=30&app=106&f=JPEG?w=640&h=867&s=F4A621F0C030C7EF283839370300D0C4",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|38",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
		]
	});


	let maoyaoList = reactive < any > ({
		data: [{
				title: "999感冒灵",
				lvName: "快速治感冒",
				discount: "￥320",
				discountVal: 320,
				zhekou: "3.7折",
				originPrice: "￥680",
				jifen: 10, //可抵扣的金额
				buy: 1, //默认1
				sell: "已售 1000+",
				imgUrl: "https://b0.bdstatic.com/a59096ba65a930b94a14b5509fcff840.jpg@h_1280",
				paihang: "药品类销量第一 >",
				tags: ["共省108元", "90天低价", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-pink-500 text-pink-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|58",
						checked: true
					}, /*默认1人份*/ ]
				}, ],
			},
			{
				title: "感冒灵颗粒",
				lvName: "袋装颗粒",
				discount: "￥99",
				discountVal: 99,
				zhekou: "3.7折",
				originPrice: "￥128",
				paihang: "",
				jifen: 6, //可抵扣的金额
				buy: 1, //默认1
				sell: "已售 500+",
				imgUrl: "https://img1.baidu.com/it/u=1994337447,2654131788&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
				tags: ["30+回头推荐", "积分抵扣"],
				class: ["border border-red-500 text-red-500 text-xs flex justify-center",
					"border border-cyan-500 text-cyan-500 text-xs flex justify-center"
				],
				optionLists: [{
					otName: '份量',
					options: [{
						value: "1|38",
						checked: true
					}, /*默认1人份*/ ]
				}],
			},
		]
	});



	//计算总价格	
	const countPay = () => {
		jfyouhui.value = 0;
		realPay.value = 0;
		let arrIndex = 0;
		let buy = 0;

		//计算购买数量
		/*
		buyerInfo.data.buyList.forEach(item=>{
			if(JSON.stringify(item.optionLists)!="[]"){
				item.optionLists.forEach(subitem=>{
					if(subitem.otName==='份量'){
						subitem.options.forEach(thiritem=>{
							console.log("thiritem:",thiritem)
							if(thiritem.checked){
								buyerInfo.data.buyList[arrIndex].buy=num;
							}
						});
					}
				});
			}
			console.log("索引:==>",arrIndex)
			arrIndex++;
		});
		//*/
		//计算总价格
		buyerInfo.data.buyList.forEach(item => {
			realPay.value += item.discountVal * item.buy;
			jfyouhui.value += item.jifen;
		});

		console.log("总价格:", realPay.value)
	}

	//添加到购物车
	const addToCar = () => {

		let addData = diancaiList.data[ggIndex.value];
		let index = buyerInfo.data.buyList.findIndex(item => item.title === addData.title);
		if (index === -1) {
			buyerInfo.data.buyList.push(addData);
		}
		productTotal.value = buyerInfo.data.buyList.length;
		uni.setStorageSync("buyerInfo", buyerInfo.data);

		//计算总价格
		countPay();

		uni.$tools.Toast("商品已添加入购物车");
	}


	onLoad((e: any) => {
		//console.log("e:===>",e);
		/*
		let buyerInfo= uni.getStorageSync("buyerInfo") || null;
		realPay.value=(buyerInfo!=null && buyerInfo.productIndex===ggIndex.value)?buyerInfo.realPay:diancaiList.data[ggIndex.value].discountVal;
		//*/
		countPay(); //计算购买的商品总价
		// if(e.id!=null){
		// 	dataId.value=e.id;
		// 	if(dataId.value==="2"){
		// 		console.log("dataId:===>",dataId.value);
		// 		meishiList.data=xinyueList.data;
		// 	}
		// }

		let storeData = uni.getStorageSync("productListData") || null;
		if (storeData != null) {
			//显示店铺招投信息
			storeInfo.Logo = storeData.imgUrl;
			storeInfo.Name = storeData.title;
			storeInfo.Pingfen = storeData.starValue;
			storeInfo.Sell = storeData.sell.replace("月售", "").replace("月销", "").replace(" ", "").replace("款", "")
				.replace("单", "");
			storeInfo.Time = storeData.riderTime;
			//显示左侧列表 --1
			if (storeData.type === '美食' && storeData.worktype === '西式快餐/汉堡') {
				itemList = [];
				itemList.push({
					name: '推荐'
				});
				itemList.push({
					name: '汉堡/卷'
				});
				itemList.push({
					name: '原味鸡/小吃'
				});
				itemList.push({
					name: 'K咖啡'
				});
				itemList.push({
					name: '甜品/冰淇淋'
				})
			}
			//显示左侧列表 --2
			if (storeData.type === '美食' && storeData.worktype === '中式餐饮/酒楼') {
				itemList = [];
				itemList.push({
					name: '豆沙包'
				});
				itemList.push({
					name: '蒜蓉排骨'
				});
				itemList.push({
					name: '清蒸凤爪'
				});
				itemList.push({
					name: '豆浆/油条'
				});
				itemList.push({
					name: '煎炸饺子'
				});
				console.log("酒楼storeData Id:", storeData.id, storeData.id === 2);
				if (storeData.id === 2) { //馨越楼
					diancaiList.data = xinyueList.data;
					meishiList.data = xinyueList.data;
				}
			}
			//显示左侧列表 --3
			if (storeData.type === '休闲娱乐' && storeData.worktype === '休闲娱乐/KTV') {
				itemList = [];
				itemList.push({
					name: '包时KTV'
				});
				itemList.push({
					name: '2小时KTV'
				});
				itemList.push({
					name: '日间KTV'
				});
				itemList.push({
					name: '夜间KTV'
				});
				itemList.push({
					name: '包场KTV'
				})
				if (storeData.id === 1) {
					diancaiList.data = mingmenList.data;
				}
			}
			//显示左侧列表 --4
			if (storeData.type === '休闲娱乐' && storeData.worktype === '按摩/足疗') {
				itemList = [];
				itemList.push({
					name: '沐足'
				});
				itemList.push({
					name: '草药沐足'
				});
				itemList.push({
					name: '沐足/推拿'
				});
				itemList.push({
					name: '清蒸沐足'
				});
				itemList.push({
					name: '沐足踩背'
				});
				if (storeData.id === 2) {
					diancaiList.data = jinxiList.data;
				}
			}
			//显示左侧列表 --5
			if (storeData.type === '按摩沐足' && storeData.worktype === '按摩/足疗') {
				itemList = [];
				itemList.push({
					name: '按摩沐足'
				});
				itemList.push({
					name: '中草药沐足'
				});
				itemList.push({
					name: '推拿沐足'
				});
				itemList.push({
					name: '港式沐足'
				});
				itemList.push({
					name: '中式踩背'
				});
				itemList.push({
					name: '泰式沐足'
				});
				itemList.push({
					name: '越南沐足'
				});
				itemList.push({
					name: '马来西亚推拿'
				});
				itemList.push({
					name: '菲律宾推拿'
				});
				itemList.push({
					name: '港式沐足踩背'
				});
				if (storeData.id === 1) {
					diancaiList.data = chuanyuanList.data;
				}
				if (storeData.id === 2) {
					diancaiList.data = zunyingList.data;
				}
			}
			//显示左侧列表 --6
			if (storeData.type === '医学美容' && storeData.worktype === '医学美容') {
				itemList = [];
				itemList.push({
					name: '隆鼻'
				});
				itemList.push({
					name: '双眼皮'
				});
				if (storeData.id === 1) {
					diancaiList.data = mlyList.data;
				}
				if (storeData.id === 2) {
					diancaiList.data = huameiList.data;
				}
			}

			//便利店
			if (storeData.type === '便利店' && storeData.worktype === '便利店') {
				itemList = [];
				if (storeData.id === 1) {
					itemList.push({
						name: '秋冬防寒'
					});
					diancaiList.data = qiudongList.data;
					//console.log("6666666666666666666666666666=>",diancaiList.data);
				}
				if (storeData.id === 2) {
					itemList.push({
						name: '热销啤酒'
					});
					diancaiList.data = myjList.data;
				}

			}
			//酒店
			if (storeData.type === '酒店' && storeData.worktype === '酒店') {
				itemList = [];
				itemList.push({
					name: '影视大床'
				});
				itemList.push({
					name: '多人房'
				});
				diancaiList.data = jiudianList.data;
			}
			//百货
			if (storeData.type === '百货' && storeData.worktype === '百货') {
				itemList = [];
				if (storeData.id === 1) {
					itemList.push({
						name: '牙膏'
					});
					diancaiList.data = baihuoList.data;
				}
				if (storeData.id === 2) {
					itemList.push({
						name: '漱口液'
					});
					diancaiList.data = sukouList.data;
				}
			}
			//电影
			if (storeData.type === '电影' && storeData.worktype === '电影') {
				itemList = [];
				itemList.push({
					name: '热映电影'
				});
				itemList.push({
					name: '高评分'
				});
				diancaiList.data = dyList.data;
			}
			//看病买药
			if (storeData.type === '看病买药' && storeData.worktype === '看病买药') {
				itemList = [];
				itemList.push({
					name: '感冒灵'
				});
				itemList.push({
					name: '退烧药'
				});
				diancaiList.data = maoyaoList.data;
			}
		}
	});
</script>

<style lang='scss' scoped>
	@import "shop_productList.scss";
</style>